<template functional>
  <div
    class="data-card-container"
    :style="{
      'background-image': `linear-gradient(${props.color}, ${props.color}cc)`,
    }"
    v-on="listeners"
  >
    <p class="title">{{ props.title }}</p>
    <p class="num">{{ props.num }}</p>
  </div>
</template>

<style lang="less" scoped>
.data-card-container {
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;

  .title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
  }

  .num {
    margin: 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
}
</style>
